<!--
* @Author: 张昊
* @Date:  2021-12-22 16:58:21
* @FilePath: /components/common/text/txt-title-bar.vue
* @Description: 下面带着一个绿色下划线的标题 以及左边的链接按钮
-->
<template>
	<view class="detailTop">
		<!-- 头部左侧 -->
		<view class="detailLeft">
			<view class="title" v-if="items.nameTitle || items.title">{{ items.nameTitle || items.title }}</view>
			<!-- 空心tab 通用 -->
			<view v-for="(it, i) in items.tag" :key="i"><txt-tag :it="it" /></view>
		</view>
		<!-- 头部右侧 -->
		<view class="fun"><txt-fun v-for="(it, i) in items.fun" :key="i" :it="it" @click.native="click(it, i)" /></view>
	</view>
	<!-- 四大通用Fun弹窗 -->
</template>

<script>
export default {
	props: {
		item: {
			type: Object
		},
		selectFun: {
			type: Function
		}
	},
	data() {
		return {
			// 接受传过来的数组内容
			columns: [],
			// props接收过来的item 更换为动态
			items: {},
			it: {},
			// 过度
			showTransition: false
		};
	},
	watch: {
		item(val) {
			this.items = val;
		}
	},
	methods: {
		load1() {
			// props接收过来的item 更换为动态
			this.items = this.item;
		},
		click(it, i) {
			console.log('点击功能');
			// 显示弹窗数据
			if (it.message && it.message != '') {
				uni.$u.toast(it.message);
			}
			if (this.item?.children) {
				uni.setStorage({
					key: 'titleFunPayload',
					data: JSON.stringify(this.item?.children)
				});
			}
			// 是否跳转
			if (it.url && it.url != '') {
				uni.navigateTo({
					url: it.url
				});
			}
			/**
			 * @description: 通用的四大按钮点击
			 * @param {*}
			 * @return: {*}
			 * @author: 张昊
			 */

			// 将点击了第几个功能发送给父组件
			this.$emit('clickIndexFUN', i);
			if(it.fun){
				this.$emit('clickIndependenceFun', it.fun);
			}

			/**
			 * @description:
			 * @param {*}
			 * @return: {*}
			 * @author: 
			 */
			this.it = it;
			// 点击时候把传过来的数组内容 赋值给data里面定义好的数组
			this.columns = it.columns;
			// 支出账单切换
			if (it.pay) {
				// this.$refs.pickers.show();
				uni.$emit('spendingPay', it);
			}
			// 账单明细切换
			if (it.details) {
				uni.$emit('details', it);
			}
			// 按年查看 按月查看
			if (it.pullList) {
				uni.$emit('pullList', it);
			}
			// 全年盈利分析
			if (it.yearsProfit) {
				uni.$emit('yearsProfit');
			}
			// 全年盈利分析账单详情切换
			if (it.ProfitSwitch) {
				uni.$emit('ProfitSwitch');
			}
		}
	},

	mounted() {
		this.load1();

		// 过度
		setTimeout(() => {
			this.showTransition = true;
		}, 100);
	}
};
</script>

<style scoped lang="scss">
.title {
	// padding: 14 * 2rpx 0 0 14 * 2rpx;
	color: #333333;
	font-size: $uni-font-title;
	font-weight: 600;
	border-bottom: 4rpx solid #0086ff;
	padding-bottom: 4rpx;
	display: flex;
	justify-content: center;
	margin-right: 28rpx;
}

.detailTop {
	display: flex;
	justify-content: space-between;

	.fun {
		display: flex;
		align-items: center;
	}

	.customer {
		padding-right: 14 * 2rpx;
		color: #0086ff;
	}

	.editor {
		padding-right: 14 * 2rpx;
		color: #0086ff;
	}

	.delete {
		color: #ff6565;
	}

	.export {
		color: #0087fa;
	}
}

.detailLeft {
	display: flex;
	justify-content: space-between;

	.tag {
		margin: 0 8 * 2rpx;
	}
}

.more {
	color: #0087fa;
	display: flex;
	align-items: center;

	.img {
		width: 14 * 2rpx;
		height: 14 * 2rpx;
		margin-left: 5rpx;
	}
}
</style>
